<template>
  <div class="cart_container">

    <div class="cart_content" v-if="true">

      <van-card class="card_overall">
        <template #tags>
          <div class="overall_header flex">
            <div class="title">全场换购</div>
            <div class="activity">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已满0.01元，可选择10件商品换购</div>
            <div class="header_right">去换购<van-icon name="arrow" /></div>
          </div>
          <van-swipe :loop="false" :width="240" :show-indicators="false">
            <van-swipe-item>
              <div class="card_goods">
                <div class="card flex">
                  <img class="goods_img"
                    src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146">
                  <div class="goods_info flex_c">
                    <div class="goods_title">江南特产，西湖藕粉 原味 20克*15袋</div>
                    <div class="goods_intro">原味藕粉 20克*15袋</div>
                    <div class="goods_price">
                      换购价
                      <span class="price">￥20.8</span>
                      <span class="market_price">￥25</span>
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <van-icon name="shopping-cart-o" />
                    </div>
                  </div>
                </div>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="card_goods">
                <div class="card flex">
                  <img class="goods_img"
                    src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146">
                  <div class="goods_info flex_c">
                    <div class="goods_title">江南特产，西湖藕粉 原味 20克*15袋</div>
                    <div class="goods_intro">原味藕粉 20克*15袋</div>
                    <div class="goods_price">
                      换购价
                      <span class="price">￥20.8</span>
                      <span class="market_price">￥25</span>
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <van-icon name="shopping-cart-o" />
                    </div>
                  </div>
                </div>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="card_goods">
                <div class="card flex">
                  <img class="goods_img"
                    src="https://yanxuan-item.nosdn.127.net/72ffe0a001452f25993d049ea01eb55d.png?imageView&quality=35&thumbnail=146x146">
                  <div class="goods_info flex_c">
                    <div class="goods_title">江南特产，西湖藕粉 原味 20克*15袋</div>
                    <div class="goods_intro">原味藕粉 20克*15袋</div>
                    <div class="goods_price">
                      换购价
                      <span class="price">￥20.8</span>
                      <span class="market_price">￥25</span>
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <van-icon name="shopping-cart-o" />
                    </div>
                  </div>
                </div>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="card_goods">
                <div class="seeall">
                  查看全部<van-icon name="arrow" />
                </div>
              </div>

            </van-swipe-item>
          </van-swipe>

        </template>
      </van-card>


      <div class="goods_list_container">
        <div class="goods_list">
          <CartCard v-for="item in cartList" :key="item.id">
            <div class="item_content flex">
              <van-checkbox v-model="item.isChecked" @change="selectHandle(item)"></van-checkbox>
              <div class="content_left" @click="ToGoodsDetail">
                <img :src="item.imgUrl" alt="">
              </div>
              <div class="content_right" @click="ToGoodsDetail">
                <div class="right_title flex">
                  <div class="red">{{ item.sourceType }}&nbsp;&nbsp;</div>
                  <div class="name">{{ item.skuName }}</div>
                </div>
                <div class="tag">
                  <van-tag round font-size="16px">数量*{{ item.skuNum }}</van-tag>
                </div>
                <div class="price_wrap flex">
                  <div class="price">￥{{ item.cartPrice }}</div>
                  <div class="discounts">优惠后￥{{ item.cartPrice }}</div>
                  <van-button size="mini" type="danger" @click.stop="delGoodsHandle(item.skuId)">删除</van-button>

                </div>
              </div>
            </div>
          </CartCard>
        </div>
      </div>

      <div class="h_60"></div>
      <div class="bottom_container flex_c">
        <div class="bottom flex">
          <div class="flex sel_all_wrap">
            <input
              :checked="allChecked"
              @change="changeAllSelect"
              type="checkbox"
            /> <span class="sel_all">全选</span>
          </div>
          <div class="middle_content flex_c">
            <div class="count">合计：￥{{sumCount}}</div>
            <div class="discounts_price">已优惠：￥ 0 <span>查看详情</span></div>
          </div>
          <div>
            <van-button  type="danger" class="settle" @click="ToOrder">结算({{cartList.filter(item => item.isChecked).length}})</van-button>
          </div>
        </div>
      </div>
    </div>

    <van-empty v-else image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
      description="空空如也，去添加点什么吧！" class="empty" />
    <Tabbar></Tabbar>
  </div>
</template>

<script setup lang="ts">
import CartCard from '@/components/CartCard/index.vue'
import { onMounted, ref ,computed} from 'vue'
import cartApi from '@/api/cart'
import router from '@/router';
import { showFailToast, showSuccessToast } from 'vant';

interface anyObjModel {
  [prop: string]: any
}
const cartList = ref<anyObjModel[]>([])




// 事件回调
const selectHandle = (item:anyObjModel) => {
  changeCheck(item.skuId,item.isChecked ? '1' : '0')
  cartList.value.map(goodsItem => {
    goodsItem.skuId === item.skuId && goodsItem.isChecked === item.isChecked
    return item
  })
}

const changeAllSelect = (e:any) => {
  cartList.value.map(item => {
    item.isChecked = e.target.checked
    return item
  })
}

const delGoodsHandle = (skuId:string) => {
  delGoods(skuId)
}

// 计算属性
const sumCount = computed(()=>{
  return cartList.value.reduce((prev,current)=>{
    if(current.isChecked){
     return prev + current.skuPrice * current.skuNum
    }else {
      return prev
    }
  },0)
})

const allChecked = computed(() => {
  return cartList.value.every(item => item.isChecked)
})

// 生命周期函数
onMounted(() => {
  getCartList()
})
// 功能函数
// 获取购物车列表功能函数
const getCartList = async () => {
  try {
    const res = await cartApi.getCartList()
    
    cartList.value = res[0].cartInfoList


  } catch (error) {
    console.log(error);

  }
}
const changeCheck = async (skuID: string, isChecked: string) => {
  try {
    const res = await cartApi.changeCheck(skuID, isChecked);

    
  } catch (error) {
    console.log(error);
    showFailToast('修改状态失败')
  }
}

const delGoods = async (skuId:string) => {
  try {
    const res = await cartApi.delCartGoods(skuId)
    if(res.code === 200){
      showSuccessToast('删除商品成功')
      getCartList()
    }
  } catch (error) {
    console.log(error);
    showFailToast('删除商品失败')
    
  }
}

function ToGoodsDetail() {
  router.push('/goods/goodsdetail')
}
function ToOrder() {
  router.push('/order')
}
</script>

<style scoped lang="less">
.h_60 {
  height: 60px;
}

.card_overall {
  background-color: #fff;
  border-radius: 10px;
  margin: 10px;
  padding: 15px;

  .overall_header {
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .activity {
      font-size: 12px;
    }

    .header_right {
      color: red;
      font-size: 12px;
    }
  }

}

.cart_container {
  .card_goods {
    margin-top: 15px;
    margin-bottom: 15px;

    .card {
      border-radius: 10px;
      height: 70px;
      background-color: #f4f4f4;
      width: 225px;
      padding-right: 5px;

      .goods_img {
        display: block;
        width: 70px;
        height: 100%;
      }

      .goods_info {
        width: 150px;
        padding: 10px 5px;

        .goods_title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 12px;
          color: #333;
        }

        .goods_intro {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 12px;
          color: #999;
        }

        .goods_price {
          color: red;

          .price {
            font-weight: bold;
            font-size: 16px;
          }

          .market_price {
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }

  .seeall {
    border-radius: 3px;
    height: 70px;
    background-color: #f4f4f4;
    width: 77px;
    line-height: 70px;
    text-align: center;
    color: red;
    padding-right: 5px;
  }

  .goods_list_container {
    .goods_list {
      .item_content {
        margin-top: 10px;

        .content_left {
          img {
            width: 90px;
            height: 90px;
          }
        }

        .content_right {
          width: 205px;

          .right_title {
            font-size: 14px;
            height: 21px;

            .red {
              color: red;
              width: 80px;
            }

            .name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .price_wrap {
            margin-top: 10px;
            height: 30px;
            line-height: 20px;
            justify-content: space-between;
            .price {
              font-size: 18px;
              font-weight: bold;
            }

            .discounts {
              color: red;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  .bottom_container {
    position: fixed;
    bottom: 50px;
    background-color: #eee;
    width: 100%;
    height: 60px;
    justify-content: center;

    .bottom {
      justify-content: space-around;
      .sel_all_wrap {
        // justify-content: center;
        align-items: center;
        .sel_all {
          font-size: 16px;
        }
      }

      .middle_content {
        font-size: 14px;
        text-align: right;

        .count {
          color: red;
        }

        .discounts_price {
          font-size: 12px;
        }
      }

      .settle {
        width: 112px;
        height: 36px;
        border-radius: 18px;
      }
    }
  }

  .empty {
    margin-top: 200px;
  }
}</style>